/**
 * 一起学 mapbox 第三讲 创建 点  线  面
 *
 * 地图坐标系：
 *   - 坐标系：不关心
 *      使用wgs84 坐标系
 *      wgs84 是什么？ 不重要，当然也可以百度去看下是什么意思
 *
 *   - 市面上有很多地图使用的坐标系
 *      百度地图的 百度09  高德地图的自己坐标系
 *      火星坐标系 城建坐标系 等等...
 *
 *      只需要知道它长得什么样子
 *      {lng: 121.47241708373599, lat: 31.20356864906023} 像这样的
 *
 */

/**
 * 创建点位
 *
 * html body
 * div  h1
 * <h1>12323</h1>
 */

// 创建一个图层  图层上面告诉mapbox 创建是什么类型的图层 点图层 还是 面图层 还是线图层？
// 点图层  创建 数据源：点的元素

// 套路就是  3个步骤 创建数据源 创建图层 绑定数据源
// layer layerSource feature


const map = window.$myMap
// 创建点图层
// 1 引入点位图片
map.loadImage(
  '', (error, image) => {
    if (error) throw error;
    map.addImage('marker1', image);
  })

map.loadImage(
  'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png', (error, image) => {
    if (error) throw error;
    map.addImage('custom-marker', image);
  })

// 2 基础点位数据
var pointDataGeojson2 = {
  'type': 'FeatureCollection',
  'features': [
    {
      // feature for Mapbox DC
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [
          121.48211102197638, 31.22894997464809
        ]
      },
      'properties': {
        'title': 'Mapbox DC',
        icon: 'marker1',
      }
    },
    {
      // feature for Mapbox DC
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [
          121.48343561046238, 31.227123120578284
        ]
      },
      'properties': {
        'title': 'Mapbox DC',
        icon: 'custom-marker',
      }
    },
  ]
}

// 3 创建数据源并添加
var pointSource = {
  type: 'geojson',
  data: {
    type: "FeatureCollection",
    features: []
  },
}
map.addSource('pointSource', pointSource)
var point_source = map.getSource('pointSource');
point_source.setData(pointDataGeojson2)


// 4 创建图层并添加
var pointLayer1 = {
  id: 'pointLayer2',
  type: 'symbol',
  source: 'pointSource',
  layout: {
    // 为图层设置引用的图片ID
    "icon-image": ['get', 'icon'],
    "icon-size": 1,
  }
}
map.addLayer(pointLayer1)

